<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>搜索封面</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <style>
        .hotword span{background: #ddd;padding: .3rem .8rem;margin: .3rem ;display: inline-block;float: left;border-radius: .15rem;font-size: .7rem;}
        .history_word span{width: 100%;padding: .3rem .8rem;margin:.2rem 0;text-align: left;}
        .aui-searchbar-input{border-radius: 5rem;}
        img.arrow{display: inline-block;width: .5rem;margin:0 .2rem;}
        .select{position: absolute;background: #fff;top: 1.75rem;left: 2.5rem;width: 3.5rem;font-size: .7rem;color: #9e9e9e;z-index: 99;display: none;}
        .select li{border-bottom: 1px solid #f4f4f4;height: 2rem;line-height: 2rem;}
        #tjp{display: inline-block;min-width: 2rem;}
        .aui-searchbar-input input{width: 70%;}
        #jb, .jb{background: white}
        .aui-bar-nav a{color: #666;}
        .aui-bar-nav .aui-btn .aui-iconfont{color: #666;}
        .aui-searchbar-input{border:1px solid #ddd;}
        body{background: white;}
        .hotword span{background: transparent;border:1px solid #ddd;padding: 0.2rem 0.5rem;border-radius: 2rem;margin: 0.2rem 0.2rem 0.2rem 0}
        .history_word span{background: transparent;border:1px solid #ddd;padding: 0.2rem 0.5rem;border-radius: 2rem;width: auto;margin: 0.2rem 0.2rem 0.2rem 0;}
    </style>
</head>
<body>
    <header class="aui-bar aui-bar-nav jb" id="aui-header">
        <a class="aui-pull-left aui-btn"  onclick="closeWin();">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title" style="left:1.5rem; right: 2rem;">
            <div class="aui-searchbar bg-none" id="search">
                <div class="aui-searchbar-input aui-border-radius">
                    <i class="aui-iconfont aui-icon-search" style="font-size: .6rem;"></i>
                    <span onclick="select_tjp(this)" id="tjp" data-open="0" data-tjp="t"><label>淘宝</label><img src="../image/sca_xia.png" class="arrow"></span>
                    <input type="search" placeholder="请输入搜索内容" id="search-input"  autofocus='true' >
                    <div class="aui-searchbar-clear-btn"id="clearbtn">
                        <i class="aui-iconfont aui-icon-close" style="font-size: .6rem;"></i>
                    </div>
                </div>
            </div>
        </div>
        <a class="aui-pull-right aui-btn aui-font-size-14" id="dosearch">
            搜索
        </a>
        <div class="select">
        	<ul>
        		<li data-tjp='t'>淘宝</li>
        		<li data-tjp='j'>京东</li>
        		<li data-tjp='p'>拼多多</li>
        	</ul>
        </div>
    </header>
    <section class="suggest bg-white hide">
    	<div class="aui-content aui-margin-b-15">
		    <ul class="aui-list aui-list-in" id="suggest_list">
		    </ul>
		</div>
    </section>
    <div class="keyword">
	    <section class="aui-content-padded hide" id="history">
	    	<p class="aui-padded-b-10">历史纪录 <i class="aui-iconfont aui-icon-trash aui-pull-right" id="clearhistory"></i></p>
	    	<div class="word history_word">
	    	</div>
	    </section>
  	  <div style="clear: both;"></div>
      <section class="aui-content-padded">
	    	<p class="aui-padded-b-10">大家都在搜</p>
	    	<div class="word hotword">
	    	</div>
	    </section>
    </div>

</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/zepto.min.js" ></script>
<script type="text/javascript" src="../script/common.js" ></script>
<script type="text/javascript">
	var headerPos;
    apiready = function(){
        api.parseTapmode();
        var header = $api.byId('aui-header');
        var headerH =  $api.fixStatusBar(header);
        headerPos = $api.offset(header);
        $('.select').css('top',headerH-12);
        //默认选择
        var default_tjp = api.pageParam.tjp||'t';
        var tjp_arr = {"t":"淘宝","j":"京东","p":"拼多多"}
        $('#tjp').attr('data-tjp',default_tjp);
        $('#tjp label').text(tjp_arr[default_tjp]);
        //var body_h = $api.offset($api.dom('body')).h;
        //检测输入
        $('.aui-title').on('click','#search-input',function(){
        	hide_tjp();
        });
		$('.aui-title').on('input propertychange','#search-input',function(){
			var q = $(this).val();
			if (q!=='' && event.keyCode!=13) {
				$('#clearbtn').show();
				//获取建议词
				_Ajax(window.APIServer.Suggest,'post',{values:{q:q}},'json',function(ret){
					if (ret.code==1) {
						$('.keyword').hide();
						$('.suggest').show();
						var html = '';
						$(ret.data).each(function(k,v){
							html+='<li class="aui-list-item q"><div class="aui-list-item-inner"><div class="aui-list-item-title">'+v+'</div></div></li>';
						});
						$('#suggest_list').html(html);
						//隐藏打开的frame
						api.setFrameAttr({
						    name: 'search_frm',
						    rect: {
				                x: 0,
				                y: 1000,
				                w: 'auto',
				                h: 'auto'
				            },
						});
					}
				});

			}else{
				//打开隐藏的frame
				api.setFrameAttr({
				    name: 'search_frm',
				    rect: {
		                x: 0,
		                y: headerPos.h,
		                w: 'auto',
		                h: 'auto'
		            },
				});
				$('#clearbtn').hide();
				$('.suggest').hide();
				$('.keyword').show();
			}
		});
		//清除关键词
		$('.aui-title').on('click','#clearbtn',function(){
			$('#search-input').val('');
			$(this).hide();
			$('.suggest').hide();
			$('.keyword').show();
			//打开隐藏的frame
			api.setFrameAttr({
			    name: 'search_frm',
			    hidden: false
			});
		})
		//回车自动提交
		$('#search-input').keyup(function(event){
		    if(event.keyCode===13){
		        $("#dosearch").click();
		    }
		});
		$('#dosearch').click(function(){
			var q = $('#search-input').val();
			if (q=='') {
				return false;
			}
			//存入
			history(q);
			//执行something...
			dosearch(q);
		});
		//热搜词
		_loading2();
		_Ajax(window.APIServer.HotWords,'post','','json',function(ret){
			_loading2_close();
			if (ret.code==1) {
				var words = ret.data;
				var spans = '';
				for(var i=0;i<12;i++){
					spans+='<span class="aui-label q">'+words[i]+'</span>';
				}
				$('.hotword').html(spans);
			}
		});
		//搜索历史
		var history_word = JSON.parse(_GetPrefs('search_history_word')||'[]');
		if (history_word) {
			//history_word.reverse();
			$('#history').show();
			var html = ''
			$(history_word).each(function(k,v){
				html+='<span class="aui-label aui-ellipsis-1 q">'+v+'</span>'
			});
			$('.history_word').html(html);
		}
		//清除历史
		$('#clearhistory').click(function(){
			_RemovePrefs('search_history_word');
			$('#history').hide();
		});
		//点击关键词搜索
		$('ul,.word').on('click','.q',function(){
			var q = $(this).text();
			//存入
			history(q);
			//搜索
			dosearch(q);
			$('#search-input').val(q);
		})
		//选择
		$('.select li').click(function(){
			var tjp = $(this).data('tjp');
			$('#tjp').data('tjp',tjp);
			$('#tjp label').text($(this).text());
			hide_tjp();
		});
    };
    //搜索方法
    function dosearch(q){
    	api.openWin({
    	    name: 'search_re_win',
    	    url: './search_re_win.html',
            reload:true,
    	    pageParam: {
    	        q: q,
    	        tjp:$('#tjp').data('tjp')
    	    },
    	    //bounces: true,
    	    bgColor: '#fff',
    	    vScrollBarEnabled: false,
    	    hScrollBarEnabled: false,
            progress:{
                type:'page',
                color:'rgba(255,0,102,1.0)'
            }
    	});
    }
    //存入历史记录
    function history(q){
    	//记录搜索历史于本地
		var history_word = JSON.parse(_GetPrefs('search_history_word')||'[]');
		if (!history_word) {
			history_word = [];
		}
		if (history_word.length>9) {
			history_word.shift();
		}
		history_word.push(q);
		history_word = unique(history_word.reverse());//去重
		_SetPrefs('search_history_word',JSON.stringify(history_word));
    }
    function unique(arr) {
	  var result = [], hash = {};
	  for (var i = 0, elem; (elem = arr[i]) != null; i++) {
	    if (!hash[elem]) {
	      result.push(elem);
	      hash[elem] = true;
	    }
	  }
	  return result;
	}
	//淘京拼
	function select_tjp(obj){
		var is_open = $(obj).data('open');
		if (is_open=='0') {
			$('.arrow').attr('src','../image/sca_shang.png');
			$(obj).data('open','1');
			show_tjp();
		}else{
			$('.arrow').attr('src','../image/sca_xia.png');
			$(obj).data('open','0');
			hide_tjp();
		}

	}
	function show_tjp(){
		$('.select').show();
	}
	function hide_tjp(){
		$('.select').hide();
	}
</script>
</html>
